<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Introduce</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/introduce.style.css"/>
</head>
<body>

<div class="container">
    <div class="section" id="section0">
        <header class="am-topbar">
            <h1 class="am-topbar-brand">
                <a href="#">Amaze UI</a>
            </h1>

            <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
                    data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
                    class="am-icon-bars"></span></button>

            <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
                <ul class="am-nav am-nav-pills am-topbar-nav">
                    <li class="am-active"><a href="#">Introduce</a></li>
                    <li><a href="#">开始使用</a></li>
                    <li><a href="https://github.com/allmobilize/amazeui/stargazers" target="_blank"><span class="am-icon-star"></span> <span id="ghs-stargazers"></span> Stars</a></li>
                    <li><a href="https://github.com/allmobilize/amazeui/network/members" target="_blank"><span class="am-icon-code-fork"></span> <span id="ghs-forks"></span> Forks</a></li>
                    <li class="am-dropdown" data-am-dropdown>
                        <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                            菜单 <span class="am-icon-caret-down"></span>
                        </a>
                        <ul class="am-dropdown-content">
                            <li class="am-dropdown-header">分类</li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">JS插件</a></li>
                            <li><a href="#">WEB组件</a></li>
                        </ul>
                    </li>

                </ul>

                <form class="am-topbar-form am-topbar-left am-form-inline am-topbar-right" role="search">
                    <div class="am-form-group">
                        <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
                    </div>
                    <button type="submit" class="am-btn am-btn-default am-btn-sm">搜索</button>
                </form>

            </div>
        </header>
        <div class="head-img" data-am-scrollspy="{animation:'fade'}">
            <img src="assets/img/mascot.png" alt="Amaze UI"/>
        </div>
        <div class="head-description">
            <h1 data-am-scrollspy="{animation:'slide-left'}">Amaze ~ 妹子 UI</h1>
            <h2 data-am-scrollspy="{animation:'slide-right', delay: 500}">中国首个开源 HTML5 跨屏前端框架</h2>
            <h3 data-am-scrollspy="{animation:'slide-bottom', delay: 1000}">期待你的参与，共同打造一个简单易用的前端框架!</h3>
        </div>
    </div>

    <div class="section" id="section1">
        <div class="section-left" data-am-scrollspy="{animation:'scale-down'}">
            <img src="assets/img/foundation.png" alt="mobile"/>
        </div>
        <div class="section-right">
            <h2 data-am-scrollspy="{animation:'slide-right'}">为移动而生</h2>
            <p data-am-scrollspy="{animation:'slide-right', delay: 300}">Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。</p>
        </div>
    </div>

    <div class="section" id="section2">
        <div class="section-right" data-am-scrollspy="{animation:'scale-down'}">
            <img src="assets/img/web.png" alt="mobile"/>
        </div>
        <div class="section-left">
            <h2 data-am-scrollspy="{animation:'slide-left'}">组件丰富，模块化</h2>
            <p data-am-scrollspy="{animation:'slide-left', delay: 300}">Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。</p>
        </div>
    </div>

    <div class="section" id="section3">
        <div class="section-left" data-am-scrollspy="{animation:'scale-down'}">
            <img src="assets/img/chinese.png" alt="mobile"/>
        </div>
        <div class="section-right">
            <h2 data-am-scrollspy="{animation:'slide-right'}">本地化支持</h2>
            <p data-am-scrollspy="{animation:'slide-right', delay: 300}">相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。</p>
        </div>
    </div>

    <div class="section" id="section4">
        <div class="section-right" data-am-scrollspy="{animation:'scale-down'}">
            <img src="assets/img/mobile.png" alt="mobile"/>
        </div>
        <div class="section-left">
            <h2 data-am-scrollspy="{animation:'slide-left'}">轻量级，高性能</h2>
            <p data-am-scrollspy="{animation:'slide-left', delay: 300}">Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。</p>
        </div>
    </div>

    <div class="section" id="section5">
        <header>
            <h1 data-am-scrollspy="{animation:'fade'}">站在巨人的肩膀上</h1>
            <h2 data-am-scrollspy="{animation:'slide-bottom', delay: 300}">Amaze UI 汲取了很多优秀的社区资源，通过开源的形式来回馈社区。</h2>
        </header>
        <div class="am-g am-g-fixed">
            <div class="col-md-4 am-u-md-4" data-am-scrollspy="{animation:'scale-up', delay: 600}">
                <h2>MIT License</h2>
                <p>Amaze UI 使用<a href="https://github.com/allmobilize/amazeui/blob/master/LICENSE.md" target="_blank">MIT 许可证</a>发布，用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 Amaze UI 及其副本。</p>
            </div>
            <div class="col-md-4 am-u-md-4" data-am-scrollspy="{animation:'scale-up', delay: 900}">
                <h2>Heroes</h2>
                <p><a href="https://github.com/allmobilize/amazeui#%E5%8F%82%E8%80%83%E4%BD%BF%E7%94%A8%E7%9A%84%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE" target="_blank">参考、使用的项目</a>：jQuery, Zepto.js, Seajs, LESS, normalize.css, FontAwesome, Bootstrap, Foundation, UIKit, Pure, Framework7, etc.</p>
            </div>
            <div class="col-md-4 am-u-md-4" data-am-scrollspy="{animation:'scale-up', delay: 1200}">
                <h2>Credits</h2>
                <p>我们追求卓越，然时间、经验、能力有限。Amaze UI 有很多不足的地方，希望大家包容、不吝赐教，给我们提意见、建议。<a href="/getting-started/credits?_ver=1.x">感谢你们</a>！</p>
            </div>
        </div>
    </div>

    <footer>
        <p>introduce template<br/>
            <small>© Copyright XXX. Designed by Misic.</small>
        </p>
    </footer>
</div>






<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>

<!--[if lt IE 9]>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->


</body>
</html>